﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="wfTravelCarList.aspx.cs" Inherits="msBsc.WebUi.wMall.Public.wfTravelCarList" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>车辆列表</title>
    <link href="/jqPlugin/SelectSimu/css/base.css" rel="stylesheet" />
    <link href="/themes/wStyle1/css/sLayout.css" rel="stylesheet" />
    <link href="/themes/wStyle1/css/Public/sTravel.css" rel="stylesheet" />
    <link href="/themes/wStyle1/css/pagination.css" rel="stylesheet" />
    <link href="/jqPlugin/layer2/skin/layer.css" rel="stylesheet" />
    <style type="text/css">
        #divPage a, #divPage span {
            color: #333;
        }

        .viewContent .v_title {
            display: table;
            padding: 23px 0px;
            border-top: 2px solid #ccc;
            border-bottom: 2px solid #ccc;
        }

        .condition_city {
            float: left;
            margin: 20px 5px 0px 5px;
        }

        .condition {
            float: left;
            margin-top: 10px;
            margin-left:20px;
        }

        .v_rountBg {
            width: 1200px;
            height: 350px;
            background: url("/themes/wStyle1/Images/Public/rountBg.png") no-repeat;
            background-size: 1200px 350px;
            display: table;
        }

            .v_rountBg .vr_content {
                float: left;
                width: 898px;
                margin-left: 71px;
            }

            .v_rountBg .vr_more {
                float: left;
                width: 231px;
            }

            .v_rountBg .vr_title {
                width: 898px;
                height: 44px;
                color: #fff;
                line-height: 44px;
                font-family: 微软雅黑;
                margin: 44px auto 0px auto;
            }

                .v_rountBg .vr_title .vrt_name {
                    font-size: 32px;
                    margin-left: 3px;
                    margin-right: 26px;
                    display: inline-block;
                    vertical-align: middle;
                }

                .v_rountBg .vr_title .vrt_city {
                    font-size: 18px;
                    display: inline-block;
                    vertical-align: middle;
                }

                .v_rountBg .vr_title .vrt_j {
                    font-size: 18px;
                    display: inline-block;
                    vertical-align: middle;
                    margin: 0px 6px;
                }

            .v_rountBg .vr_info {
                display: table;
                width: 898px;
                height: 43px;
                margin: 20px auto 0px auto;
                background: url("/themes/wStyle1/Images/Public/rountInfoBg.png") no-repeat;
            }

                .v_rountBg .vr_info .vri_des {
                    float: left;
                    margin-left: 35px;
                    width: 133px;
                    text-align: center;
                    color: #fff;
                    font-family: 微软雅黑;
                    height: 43px;
                    line-height: 43px;
                    font-size: 24px;
                }

                .v_rountBg .vr_info .vri_day {
                    float: left;
                    width: 140px;
                    text-align: left;
                    color: #fff;
                    font-family: 微软雅黑;
                    height: 43px;
                    line-height: 43px;
                    font-size: 24px;
                }

                .v_rountBg .vr_info .vri_one {
                    float: left;
                    width: 290px;
                    display: table;
                    text-align: left;
                    font-family: 微软雅黑;
                    height: 43px;
                    line-height: 43px;
                    font-size: 18px;
                    color: #666;
                }

                    .v_rountBg .vr_info .vri_one .vrio_name {
                        display: inline-block;
                        width: 135px;
                        vertical-align: middle;
                        text-align: center;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }

                    .v_rountBg .vr_info .vri_one .vrio_shopp {
                        display: inline-block;
                        background: #ff9d00;
                        -moz-border-radius: 3px;
                        -webkit-border-radius: 3px;
                        border-radius: 3px;
                        color: #fff;
                        height: 28px;
                        line-height: 28px;
                        padding-right: 5px;
                        width: 134px;
                        vertical-align: middle;
                    }

                        .v_rountBg .vr_info .vri_one .vrio_shopp .shoppCar {
                            background: url("/themes/wStyle1/Images/Public/shopping.png") no-repeat;
                            display: inline-block;
                            height: 25px;
                            margin: 0px 5px;
                            vertical-align: middle;
                            width: 27px;
                            background-position: 0 -27px;
                        }

        .vr_more .vra_more {
            width: 93px;
            margin: 140px auto 0 auto;
            display: block;
        }

            .vr_more .vra_more .vr_btnMore {
                background: url("/themes/wStyle1/Images/Public/rountmore.png") no-repeat;
                display: block;
                height: 93px;
                width: 93px;
            }

            .vr_more .vra_more .vr_MoreName {
                display: block;
                width: 93px;
                color: #fff;
                font-size: 16px;
                font-family: 微软雅黑;
                text-align: center;
                height: 32px;
                line-height: 32px;
            }

        .v_titleRount {
            width: 1200px;
            margin-top: 30px;
        }

            .v_titleRount .condition_title {
                float: left;
                width: 1200px;
            }


            .v_titleRount .vt_locsimg {
                background: url("/themes/wStyle1/Images/Public/locationBg.png") no-repeat;
                display: inline-block;
                height: 32px;
                vertical-align: middle;
                width: 26px;
            }

            .v_titleRount .vt_name {
                color: #666666;
                font-family: 微软雅黑;
                font-size: 36px;
                margin-left: 25px;
                margin-right: 25px;
                vertical-align: middle;
            }

        .v_title .scenicName {
            float: left;
            margin: 20px 5px 0px 5px;
            min-width: 105px;
            height: 30px;
            border: 1px solid #ccc;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            position: relative;
        }

        .v_title .vt_condition {
            float: left;
            width: 1050px;
        }

        .v_title .vt_btn {
            float: left;
            width: 150px;
            text-align: right;
            line-height: 72px;
        }

            .v_title .vt_btn .vtb_btnSeach {
                width: 138px;
                border: none;
                -moz-border-radius: 3px;
                -webkit-border-radius: 3px;
                border-radius: 3px;
                height: 32px;
                text-align: center;
                color: #fff;
                font-size: 16px;
                font-family: 微软雅黑;
                background: #ff9d00;
            }

        .v_title .scenicName .cts_name {
            display: block;
            line-height: 30px;
            margin-right: 20px;
            margin-left: 5px;
        }

        .v_title .scenicName .cts_close {
            display: block;
            background: url("/themes/wStyle1/Images/Public/btnClose.png") no-repeat;
            width: 9px;
            height: 9px;
            cursor: pointer;
            position: absolute;
            right: 5px;
            top: 10px;
        }
        .seach_car {
         width:900px;
         float:right;
        }
    </style>
</head>
<body>
    <div class="head">
        <div class="h_content">
            <div class="hc_login">
                <img src="/themes/wStyle1/Images/comm/log.png" />
            </div>
            <ul class="hc_menu">
                <li class="hcm_check">首页</li>
                <li>热门城市</li>
                <li>美食资讯</li>
                <li>包车资讯</li>
                <li>购物资讯</li>
                <li>司机资讯</li>
                <li class="hcm_yd">提交需求</li>
            </ul>
            <ul class="hc_rmenu">
                <li><a class="hcr_reg">登录</a></li>
                <li class="hc_hr">|</li>
                <li><a class="hcr_reg">注册</a></li>
            </ul>
        </div>
    </div>

    <div class="viewContent">
        
        <input type="hidden" id="pageIndex" value="1" />
        <div class="v_titleRount">
            <div class="condition_title">
                <span class="vt_locsimg"></span>
                <span class="vt_name">车辆选择</span>
                <div class="seach_car">
                    <div class="condition" id="destionId_select"></div>
                    <div class="condition" id="carType"></div>
                    <div class="condition" style="width:120px;" id="carPrice"></div>
                </div>
            </div>
        </div>
        <div class="v_title" id="jdView" style="display: none">
            <div class="vt_condition" id="selectJd">
                <div class="condition_city" id="day_select"></div>
            </div>
            <div class="vt_btn">
                <input type="button" class="vtb_btnSeach" onclick="saveJd();" value="确认景点" />
            </div>
        </div>
        <ul style="display:block;" class="travel_lit" id="travel_list">
        </ul>
        <div class="jpage" style="height:auto;" id="divPage"></div>
        <xmp id="svc_list_temp" style="display: none;">
            {{#for(var i=0,len=d.rows.length;i < len;i++){ }}
            <li>
                <a class="travelC" href="/wp_TravelScenicInfo.htm?scenicId={{d.rows[i].VEHICLE_INFO_ID}}" target="_blank">
                    <img src="{{d.rows[i].VEHICLE_DEFAULT_PIC}} 288x1798img.jpg" title="{{d.rows[i].VEHICLE_NAME}}" />

                </a>
                <div class="classicInfo">
                    <div class="tl_name"><a href="/wp_TravelScenicInfo.htm?scenicId={{d.rows[i].SCENIC_ID}}" >{{d.rows[i].VEHICLE_NAME}}</a></div>
                    <div class="tl_shopping" id="jd_{{d.rows[i].VEHICLE_INFO_ID}}" isadd="0" onclick="addBag('{{d.rows[i].VEHICLE_INFO_ID}}');"><a class="shoppName" ><em class="shoppCar"></em>加入旅行包</a></div>
                </div>
            </li>
            {{#} }}
        </xmp>
    </div>
    <%=msBsc.WebUi.Code.QtHtmlGet.GetFloorHtml() %>
    <!--start JS引用-->
    <script src="/jqPlugin/js/jquery-1.8.3.min.js"></script>
    <script src="/jqPlugin/js/jBase.js"></script>
    <script src="/jqPlugin/js/jBPage.js"></script>
    <script src="/jqPlugin/js/laytpl.js"></script>
    <script src="/jqPlugin/SelectSimu/js/SelectSimu.js"></script>
    <script src="/themes/wStyle1/js/comm/jsLayout.js"></script>
    <script src="/themes/wStyle1/js/comm/jsPagination.js"></script>
    <script src="/themes/wStyle1/js/comm/VerifyJs.js"></script>
    <script src="/themes/wStyle1/js/travellingBag.js"></script>

    <script src="/jqPlugin/layer2/layer.js"></script>
    <!--end JS引用-->
    <script type="text/javascript">
        var country, city, destination;
        setArea("destionId_select", 82, 3, 1, [""], ["地区"]);

        var vdayList = ["0","1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
        var ndayList = ["车辆类型","普通轿车", "豪华轿车", "旅行车", "跑车", "面包车", "商务车", "越野车", "中巴", "大巴", "房车", "其他"];
        setArea("carType", 82, 4, 15, vdayList, ndayList);

        var vpricList = ["0-0","0-100", "100-300", "300-600", "600-900", "900-1200", "1200"];
        var npricList = ["价格区间","￥100以下", "￥100-￥300", "￥300-￥600", "￥600-￥900", "￥900-￥1200", "￥1200以上"];
        setArea("carPrice", 82, 4, 15, vpricList, npricList);

        var routelist = [];
        (function () {
            //COUNTRY,CITY,DESTINATION
            country = Bag.getRegion("COUNTRY");
            city = Bag.getRegion("CITY");
            destination = Bag.getRegion("DESTINATION");

            if (IsNull(country.id) || IsNull(city.id)) {
                layer.alert("请先选择想去的城市/地区", { icon: 7 });
                return;
            }

            $("#countryId").val(country.id);
            $("#cityId").val(city.id);
            $("#destionId").val(destination.id);
            $("#pageIndex").val(1);
            btnDo("init");
            checkCity();

        })()


        function setArea(input, width, zIndex, listNum, listValue, listOption) {
            $("#" + input).SelectSimu({
                width: width,
                zIndex: zIndex,
                listNum: listNum,
                listValue: listValue,
                listOption: listOption,
                imgSrc: '/jqPlugin/SelectSimu/img/icon_down.png'
            })
        }

        function checkCity() {
            $('#destionId_select .selectList li').live('click', function () {
                var destionId = this.getAttribute('data-value');

                destination.id = destionId;
                destination.name = $("#destionId_select input").next().html();
                Bag.setRegion("DESTINATION", destination.id, destination.name);

                btnDo("init");
            });
            $('#carType .selectList li').live('click', function () {
                btnDo("init");
            });
            $('#carPrice .selectList li').live('click', function () {
                btnDo("init");
            });
        }

        

        function btnDo(sEbtn) {
            var opart = new jsonRow();
            opart = GetGtParam();
            opart.AddCell("ACTION", "init");
            ajaxComm(opart);
        };

        //执行AJAX调用时获取参数
        function GetGtParam() {
            var pIndex = $("#pageIndex").val();
            if (IsNull(pIndex) || isNaN(pIndex)) {
                pIndex = 1;
            }
            var _jsParam = new jsonRow();
            _jsParam.AddCell("pIndex", pIndex);
            _jsParam.AddCell("carType", $("#carType input").val());
            _jsParam.AddCell("carPrice", $("#carPrice input").val());
            _jsParam.AddCell("destionId", destination.id);
            _jsParam.AddCell("cityId", city.id);
            _jsParam.AddCell("countryId", country.id);
            _jsParam.AddCell("isAll", "true");
            return _jsParam;
        };


        //设置地区
        function updateSelet(inputId, data, selectId) {
            var selectValue = $("#" + inputId + " .selectList ul");
            selectValue.html("");
            var isSelect = false;
            for (var i = 0; i < data.rows.length; i++) {
                if (selectId == data.rows[i].COUNTRY_CITY_ID) {
                    $("#" + inputId + " input").val(data.rows[i].COUNTRY_CITY_ID);
                    $("#" + inputId + " span").text(data.rows[i].COUNTRY_CITY_NME);
                    isSelect = true;
                }
                selectValue.append('<li data-value="' + data.rows[i].COUNTRY_CITY_ID + '">' + data.rows[i].COUNTRY_CITY_NME + '</li>');
            }
            if (isSelect == false && data.rows.length > 0) {
                $("#" + inputId + " input").val(data.rows[0].COUNTRY_CITY_ID);
                $("#" + inputId + " span").text(data.rows[0].COUNTRY_CITY_NME);
            }
        }

        //景点加载
        function layCarList(svcListData, rows) {
            var _html = $('#svc_list_temp').html();
            laytpl(_html).render(svcListData, function (render) {
                $("#travel_list").html(render);
            });
            var pIndex = $("#pageIndex").val();
            if (IsNull(pIndex) || isNaN(pIndex)) {
                pIndex = 1;
            }
            jsPage('divPage', rows, 20, pIndex, 'goPage');

            $(".tl_shopping").hover(function () {
                $(this).addClass("tl_checkShopp");
            },
              function () {
                  if ($(this).attr("isadd") == "0") {
                      $(this).removeClass("tl_checkShopp");
                  }
              }
            );
        };

        //加入旅行包
        function addBag(carid) {
            Bag.setRegion("CAR", carid, 1);
            location.href = "/wb_TravelBags.htm";
        }

        //分页
        function goPage(pIndex) {
            $("#pageIndex").val(pIndex);
            var opart = GetGtParam();
            opart.AddCell("ACTION", "getroute");
            ajaxComm(opart);
        }
    </script>
</body>
</html>
